$timelineHeight: 32px;

.timeline-component {
    // diameter of the start and and handle
    $handle-diameter: 20px; // keep in sync with HANDLE_DIAMETER in TimelineComponent.tsx

    // start and end handles
    $default-knob: $gray-60;
    $active-knob: $blue-50;

    // timeline slider and interval
    $light-timeline: $gray-20;
    $active-timeline: $blue-30;
    $hover-timeline: $default-knob;

    // start/end year label
    $light-fill: $gray-10;
    $hover-fill: $gray-20;
    $active-fill: $blue-20;

    width: 100%;
    height: $timelineHeight;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;

    > div {
        margin-right: 0.5em;
        &:last-child {
            margin-right: 0;
        }
    }

    .date {
        height: 100%;
        font-size: 13px;
        font-weight: 400;
        color: $dark-text;
        padding: 0 8px;
        border-radius: 4px;
        display: grid;
        place-content: center;
        margin-right: 0;
        background-color: $light-fill;
        user-select: none;

        &:hover {
            background: $hover-fill;
        }

        &:active {
            background: $active-fill;
            color: $active-text;
        }
    }

    .slider {
        height: 2px;
        flex-grow: 1;
        background: $light-timeline;
        position: relative;
        display: flex;
        align-items: center;
        margin-left: $handle-diameter;
        margin-right: $handle-diameter;

        padding: 12px 0;
    }

    .handle {
        $handleSidePadding: 6px;

        position: absolute;
        z-index: 1;
        margin-left: (-$handle-diameter * 0.5) - $handleSidePadding;
        cursor: col-resize;
        padding: 10px $handleSidePadding;

        &.hoverMarker {
            cursor: pointer;

            > .icon {
                background: $default-knob;
            }
        }

        > .icon {
            height: $handle-diameter;
            width: $handle-diameter;
            border-radius: 100%;

            background: $default-knob;
            border: 2px solid #fff;
            z-index: 1;
            pointer-events: none;

            transform: scale(1);
            transition: transform 0.1s ease-out;
        }
    }

    .interval {
        position: absolute;
        height: 2px;
        background: $active-timeline;
        padding: 10px 0;

        &:hover {
            height: 3px;
        }

        cursor: grab;
        &:active {
            cursor: grabbing;
        }

        &.interval-hover {
            background: $hover-timeline;
        }
    }

    .handle,
    .interval,
    .slider {
        box-sizing: content-box !important;
        background-clip: content-box !important;
    }

    &.hover {
        .handle > .icon {
            transform: scale(1.3);
        }

        .handle:not(.hoverMarker) > .icon {
            background: $active-knob;
        }
    }
}
